<template>

	<view class="index">
		<Header :title="'展大狮'" :isBack='false' :isLogo='true'></Header>
		<view class="swiperContainer marginTop20">
			<!-- <web-view :src="tourl"> -->
			<bwSwiper @clickItem="getBannerVal()" :imageKey="'pic'" :swiperList="banner_pic" :swiperType="swiperType" style=" width:100%;height: 100%;"></bwSwiper>
			<!-- </web-view> -->
		</view>

		<view class="content marginTop20">
			<view class="Notice ">
				<image src="../../static/img/notice.png" mode=""></image>
				<swiper class="sw swiper" autoplay="true" vertical="true">
					<swiper-item v-for="(v,i) in msg" :key='i'>
						<view @tap="tomsg(v.id)" class="line1 word">{{v.title}}</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="types disFlex">
				<view v-for="(val,index) in list" class="typeBox" :key='index' @tap="go(val,index)">
					<image :src="val.icon" mode=""></image>
					<view>{{val.text}}</view>
				</view>
			</view>
			<view class="tBox disFlex">
				<view class="title shuxian">布展租赁</view>
				<view class="next_gray more" @tap="getnav(router('rent'))">更多</view>
			</view>
			<scroll-view scroll-x="true" style="margin-top: 32rpx;white-space: nowrap; ">
				<view class="scroBox">
					<view  class="list" v-for="(item,i) in standard" :key='i' @tap="tostandard(item.id)">
						<view v-if="item.types!=null" class="iconstxt">{{item.types.name}}</view>
						<image :src="item.cover" mode=""></image>
						<view class="line2 describe">{{item.title}}</view>
						<view class="priceBox">
							<text class="price">{{item.price}}</text>
							<text class="numbers" style="color: #FE7203;font-size: 20rpx;">/件/天</text>
							<text class="word" style="color: #ccc;">非会员价</text>
						</view>
						<view  class="priceBox" style="margin-top: -5rpx;">
							<text class="price">{{item.member_price==null?item.price:item.member_price}}</text>
							<text class="numbers" style="color: #FE7203;font-size: 20rpx;">/件/天</text>
							<text class="word" style="color: red;">会员价</text>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="tBox disFlex">
				<view class="title shuxian">活动推荐</view>
				<view class="next_gray more" @tap="getnav(router('packageSharing'))">更多</view>
			</view>
			<view class="active">
				<view class="activeList" v-for="(item,i) in project" :key='i' @tap="toproject(item.id)">
					<!-- <image class="icons" src="../../static/img/sbx.png" mode=""></image> -->
					<view v-if="item.types!=null" class="iconstxt">{{item.types.name}}</view>
					<image :src="item.cover" mode=""></image>
					<view class="line2 describe">{{item.title}}</view>
					<view class="priceBox">
						<text class="price">{{item.cost}}</text>
						<text class="word" style="color: #ccc;">非会员价</text>
					</view>
					<view  class="priceBox" style="margin-top: -5rpx;">
						<text class="price">{{item.member_price==null?item.cost:item.member_price}}</text>
						<text class="word" style="color: red;">会员价</text>
					</view>
				</view>
			</view>
		</view>
		<button open-type="contact"  class="kf"><image class="kficon" src="../../static/img/kefu.png" mode=""></image></button>
	</view>
</template>

<script>
	import bwSwiper from '../../customComponents/bw-swiper/bw-swiper.vue'
	export default {
		components: {
			bwSwiper
		},
		data() {
			return {
				swiperType: true,
				list: [{
					icon: '../../static/img/indexicon1.png',
					text: '整装共享'
				}, {
					icon: '../../static/img/indexicon2.png',
					text: '布展租赁'
				}, {
					icon: '../../static/img/indexicon3.png',
					text: '特装定制'
				}, {
					icon: '../../static/img/indexicon4.png',
					text: '综合服务'
				}],
				banner_pic: [],
				// msg: '数据的法律是开发商开发就是快乐',
				standard: [],
				project: [],
				tourl: '',
				msg: [],
			}
		},
		onLoad() {
			this.getbanner()
			this.getcity()
		},
		onShow() {
			this.getstandard()
			this.getproject()
			this.getmsg()
		},
		methods: {

			getbanner() {
				this.http('/api/carousel/index', 'post', {}).then(res => {
					if (res.sta == 200) {
						res.data.forEach((v) => {
							this.banner_pic.push({
								pic: v.img,
								url: v.url
							})
							// console.log(this.banner_pic)
						})
					}
				})
			},
			go(val, index) {
				if (index == 0) {
					this.getnav(this.router(`packageSharing`));
				} else if (index == 1) {
					this.getnav(this.router(`rent`));
				} else if (index == 2) {
					// this.getnav(this.router(`bidding`));
					this.getnav(this.router(`uping`));
				} else if (index == 3) {
					this.getnav(this.router(`uping`));
				}
			},
			getcity() {
				this.http('/api/city/find_city', 'post', {}, )
					.then((res) => {
						uni.setStorageSync('citydata', res.data);
					})
			},
			getstandard() {
				this.http('/api/standard/lists', 'post', {}, )
					.then((res) => {
						this.standard = res.data
						// console.log(res.data)
					})
			},
			tostandard(v) {
				uni.navigateTo({
					url: '/pages/index/rent/rentDetail?id=' + v
				});
			},
			getproject() {
				this.http('/api/project/index', 'post', {}, )
					.then((res) => {
						this.project = res.data
						console.log(res.data)
					})
			},
			toproject(v) {
				uni.navigateTo({
					url: '/pages/index/programme/programmeDetail?id=' + v
				});
			},
			getBannerVal(e) {
				console.log(e)
				this.getnav(this.router(`webview?url=${e.url}`))
				// uni.navigateTo({
				//     url: '/pages/index/pay/webview'
				// });
			},
			getmsg() {
				this.http('/api/sys_msg/index', 'post', {})
					.then((res) => {
						this.msg = res.data.data

						console.log(this.msg)
					})
			},
			tomsg(id) {
				console.log(id)
				this.getnav(this.router(`systemInfoDetail?id=${id}&ip=/api/sys_msg/read`));
			}
		},
	}
</script>

<style lang="less">
	.index {
		.kf{
			position: fixed;
			bottom: 170rpx;
			right: 20rpx;
			width: 139rpx;
			height: 139rpx;
			border-radius: 50%;
			border: none;
		}
		.kficon{
			width: 139rpx;
			height: 139rpx;
		}
		.iconstxt {
			height: 36rpx !important;
			background-color: #FFCF59;
			border-radius: 16px 0px 16px 0pX;
			padding: 0 23rpx;
			position: absolute;
			top: -8rpx;
			left: -8rpx;
			color: #fff;
			font-size: 24rpx;
		}

		.content {
			padding: 0 40rpx;

			.Notice {
				height: 80rpx;
				background: rgba(249, 249, 249, 1);
				border-radius: 20rpx;
				display: flex;
				align-items: center;
				padding: 0 26rpx;

				image {
					width: 44rpx;
					height: 44rpx;
				}

				.sw {
					width: 100%;
					height: 40rpx;
				}

				.word {
					color: rgba(190, 201, 215, 1);
					padding-left: 15rpx;
				}
			}

			.types {
				margin-top: 40rpx;
				padding: 0 30rpx;

				.typeBox {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					image {
						width: 92rpx;
						height: 92rpx;
						border-radius: 50%;
					}

					view {
						padding-top: 20rpx;
						font-size: 23rpx;
					}
				}
			}

			.tBox {
				margin-top: 60rpx;

				.title {
					font-size: 36rpx;
					font-weight: bold;
					padding-left: 13rpx;
				}

				.more {
					color: #BEC9D7;
					padding-right: 20rpx;
				}
			}

			.scroBox {
				display: flex;
				align-items: center;
				flex-wrap: nowrap;
				padding-top: 10rpx;
				padding-left: 10rpx;

				.list {
					position: relative;
					margin-right: 30rpx;

					image {
						width: 260rpx;
						height: 150rpx;
						border-radius: 20rpx;
					}

					.describe {
						font-size: 30rpx;
						padding-top: 10rpx;
					}

					.priceBox {
						margin-top: 25rpx;
						display: flex;
						align-items: center;

						.price {
							color: #FE7203;

							&::before {
								padding-right: 10rpx;
							}
						}

						.word {
							font-size: 20rpx;
							color: #BEC9D7;
							padding-left: 10rpx;
						}
					}
				}
			}

			.active {
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-wrap: wrap;

				// padding: 0 15rpx;
				.activeList {
					width: 325rpx;
					margin-top: 32rpx;
					position: relative;

					image {
						width: 100%;
						height: 188rpx;
						border-radius: 20rpx;
					}

					.describe {
						font-size: 28rpx;
						padding-top: 10rpx;
					}

					.priceBox {
						margin-top: 25rpx;
						display: flex;
						align-items: center;

						.price {
							color: #FE7203;

							&::before {
								padding-right: 10rpx;
							}
						}

						.word {
							font-size: 20rpx;
							color: #BEC9D7;
							padding-left: 10rpx;
						}
					}
				}
			}
		}
	}
</style>
